<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
​
<html>
<head>
    <title>新增书籍</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <%--<script type="text/javascript" src="${pageContext.request.contextPath}/statics/jquery.min.js"></script>
&lt;%&ndash;    <script src="${pageContext.request.contextPath}/statics/jquery-3.4.1.min.js"></script>&ndash;%&gt;
    <script type="text/javascript" src="${pageContext.request.contextPath}/statics/bootstrap.min.js"></script>--%>


    <style>
        #atn li:hover{
            background-color:rgba(13,13,15,0.4);
            cursor: pointer;
        }
    </style>

    <script>

        (function($){
            $(window).load(function(){

                $("a[rel='load-content']").click(function(e){
                    e.preventDefault();
                    var url=$(this).attr("href");
                    $.get(url,function(data){
                        $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
                        //scroll-to appended content
                        $(".content").mCustomScrollbar("scrollTo","h2:last");
                    });
                });

                $(".content").delegate("a[href='top']","click",function(e){
                    e.preventDefault();
                    $(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
                });

            });
        })(jQuery);
    </script>
</head>
<body>
<jsp:include page="header.jsp"/>
<section class="rt_wrap content mCustomScrollbar">
    <div class="rt_content">
        <div class="page_title">
            <h2 class="fl">添加商品</h2>
            <a class="fr top_rt_btn">返回商品列表</a>
        </div>
        <section>
            <form action="${pageContext.request.contextPath}/book/addBook" method="post" enctype="multipart/form-data">
                <ul class="ulColumn2">
                    <li>
                        <span class="item_name" style="width:120px;">书籍名称：</span>
                        <input type="text" class="textbox textbox_295" placeholder="商品名称..." name="bookName"/>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">书籍数量：</span>
                        <input type="text" class="textbox" placeholder="书籍数量..." name="bookCounts"/>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">书籍价格：</span>
                        <input type="text" class="textbox" placeholder="书籍价格..." name="price"/>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">作者名称：</span>
                        <input type="text" class="textbox" placeholder="作者名称..." name="authorName" id="authorName" oninput="author()"/>
                        <ul id="atn" style="width: 139px;position: relative;margin-left: 124px">
                        </ul>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">作者简介：</span>
                        <textarea class="textbox" rows="60" cols="5" name="authorDetail" value="" id="authorDetail" style="width: 400px;height: 200px;">
                        </textarea>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">分类：</span>
                        <select class="select" name="bookkindId">
                            <c:forEach items="${bookKinds}" var="bookKinds">
                                <option value="${bookKinds.kindId}">${bookKinds.kindName}</option>
                            </c:forEach>
                        </select>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">推荐：</span>
                        <label class="single_selection"><input type="radio" name="type" value="1"/>热门推荐</label>
                        <label class="single_selection"><input type="radio" name="type" value="3"/>每周推荐</label>
                        <label class="single_selection"><input type="radio" name="type" value="0"/>不推荐</label>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">上传图片：</span>
                        <label class="uploadImg">
                            <input type="file" name="file"/>
                            <span>上传图片</span>
                        </label>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;">产品详情：</span>
                        <script id="editor" type="text/plain" style="width:1024px;height:500px;margin-left:120px;margin-top:0;"></script>
                        <input type="hidden" name="detail" value="" id="detail">
                        <!--ueditor可删除下列信息-->
                        <div id="btns" style="margin-left:120px;margin-top:8px;">
                            <div>
                                <button onclick="getAllHtml()">获得整个html的内容</button>
                                <button onclick="getContent()">获得内容</button>
                                <button onclick="setContent()">写入内容</button>
                                <button onclick="setContent(true)">追加内容</button>
                                <button onclick="getContentTxt()">获得纯文本</button>
                                <button onclick="getPlainTxt()">获得带格式的纯文本</button>
                                <button onclick="hasContent()">判断是否有内容</button>
                                <button onclick="setFocus()">使编辑器获得焦点</button>
                                <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
                                <button onmousedown="setblur(event)" >编辑器失去焦点</button>

                            </div>
                            <div>
                                <button onclick="getText()">获得当前选中的文本</button>
                                <button onclick="insertHtml()">插入给定的内容</button>
                                <button id="enable" onclick="setEnabled()">可以编辑</button>
                                <button onclick="setDisabled()">不可编辑</button>
                                <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
                                <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
                                <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
                            </div>

                            <div>
                                <button onclick="getLocalData()" >获取草稿箱内容</button>
                                <button onclick="clearLocalData()" >清空草稿箱</button>
                            </div>

                        </div>
                    </li>
                    <li>
                        <span class="item_name" style="width:120px;"></span>
                        <input type="submit" class="link_btn" onclick="btn008()"/>
                    </li>
                </ul>

            </form>
        </section>
    </div>
</section>
<script src="${pageContext.request.contextPath}/statics/js/ueditor.config.js"></script>
<script src="${pageContext.request.contextPath}/statics/js/ueditor.all.min.js"> </script>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');


    function isFocus(e){
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }
    function setblur(e){
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }
    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }
    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }
    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }
    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }
    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }
    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }
    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }
    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }
    function setFocus() {
        UE.getEditor('editor').focus();
    }
    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }
    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }
    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData () {
        alert(UE.getEditor('editor').execCommand( "getlocaldata" ));
    }

    function clearLocalData () {
        UE.getEditor('editor').execCommand( "clearlocaldata" );
        alert("已清空草稿箱")
    }
    function btn008() {
        var arr = []
        arr.push(UE.getEditor('editor').getContentTxt());
        var detail = document.getElementById("detail");
        detail.value = arr;
    }

    function author() {
        var authorName = document.getElementById("authorName");
        var atn = document.getElementById("atn");
        $.ajax({
            url:"${pageContext.request.contextPath}/book/queryAuthorByName",
            type:"POST",
            dataType: "json",
            data:{name:authorName.value},
            success:function(data){
                atn.style.display = "block"
                var authorDetail = document.getElementById("authorDetail");
                str = '';
                for (var i = 0;i < data.length;i++){
                    str += '<li class="at" style="width: 139px;height: 25px;border:1px solid #6c757d;text-align: center;line-height: 25px;margin:0 ;">'+
                            data[i].authorName+
                    '</li>'
                }
                $('#atn').html(str);

                let at = document.querySelectorAll(".at");
                for (let i = 0;i < at.length;i++){
                    at[i].onclick = function () {
                        authorName.value = data[i].authorName;
                        authorDetail.innerHTML = data[i].authorDetail;
                        atn.style.display = "none";
                    }
                }
            }
        })
    }
</script>
<%--<div class="container">
    ​
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="page-header">
                <h1>
                    <small>新增书籍</small>
                </h1>
            </div>
        </div>
    </div>
    <a href="${pageContext.request.contextPath}/book/toaddBookKind">添加分类</a>
    <form action="${pageContext.request.contextPath}/book/addBook" method="post">
        书籍封面：<input type="text" name="bookImg"><br><br><br>
        书籍名称：<input type="text" name="bookName"><br><br><br>
        书籍数量：<input type="text" name="bookCounts"><br><br><br>
        书籍详情：<input type="text" name="detail"><br><br><br>
        书籍价格：<input type="text" name="price"><br><br><br>
        书籍分类：<select name="bookkindId">
                    <c:forEach items="${bookKinds}" var="bookKinds">
                        <option value="${bookKinds.kindId}">${bookKinds.kindName}</option>
                    </c:forEach>
                </select><br><br><br>
        <input type="submit" class="btn btn-primary btn-lg" value="提交"/>
    </form>
    ​
</div>--%>
</body>
</html>
